<template>
	<view class="container">
		<view class="customer-balance">
			账户余额
			<text class="balance">{{ customerBalance | formatMoneyRmbUnit }}</text>
		</view>
		<view class="amoutlist">
			<view
				v-for="(item, index) in rechargeList"
				:key="index"
				@click="initRechargeAmount(item.Amount, index)"
				:class="[index == selectIndex ? 'seelct-recharge' : 'recharge']"
			>
				<text>{{ item.AmountName }}</text>
			</view>
		</view>
		<view class="amoutlist" v-if="showAmount">
			<view class="customer_recharge">
				<view style="width: 200rpx;margin-left: 30rpx;">金额</view>
				<view style="height: 100%;"><input type="number" v-model="Amount" class="input-number-amount" /></view>
			</view>
		</view>
		<button class="confirm-btn bottom-change-view" @click="submit()" :loading="submitUploadStatus" :disabled="submitUploadStatus">充值 ￥{{ Amount }}</button>
	</view>
</template>

<script>
import { isLogin, toLogin, successToShow, errorToShow, isNumber } from '@/config/common.js';
import { getRechargeAmountList, submitRechargeOrder, getCustomerCashBalance } from '@/constant/customer.js';
import saPopup from '@/components/sa-popup.vue';
export default {
	components: {},
	data() {
		return {
			rechargeList: [],
			Amount: 0,
			showAmount: false,
			submitUploadStatus: false,
			customerBalance: 0,
			customerId: uni.getStorageSync('customerId'),
			selectIndex: -1
		};
	},
	onLoad() {
		this.rechargeAmountList();
		this.getCustomerCashBalance();
	},
	methods: {
		async rechargeAmountList() {
			let result = await getRechargeAmountList();
			this.rechargeList = result;
		},
		async getCustomerCashBalance() {
			let result = await getCustomerCashBalance({ customerId: this.customerId });
			this.customerBalance = result;
		},
		initRechargeAmount(itemAmount, index) {
			if (itemAmount == 0) {
				this.showAmount = true;
			} else {
				this.showAmount = false;
			}
			this.selectIndex = index;
			this.Amount = itemAmount;
		},
		async submit() {
			if (!isNumber(this.Amount)) {
				errorToShow('请输入数字');
				return;
			}
			if (this.Amount == 0) {
				errorToShow('充值金额必须大于0');
				return;
			}
			const showContentText = '当前为个人余额充值，非网费充值，确定继续？';
			const _that = this;
			uni.showModal({
				title: '温馨提示',
				content: showContentText,
				success: function(res) {
					if (res.confirm) {
						_that.confrimSubtimRechage();
					}
				},
				fail: function(res) {
					errorToShow('连接服务器出现异常');
					this.submitUploadStatus = false;
				}
			});
		},
		async confrimSubtimRechage() {
			let orderInfo = {
				CustomerId: this.customerId,
				Fee: this.Amount,
				TableNum: '',
				StoreId: '',
				Remark: ''
			};
			this.submitUploadStatus = true;
			let result = await submitRechargeOrder(orderInfo);
			successToShow('订单提交成功', res => {
				uni.reLaunch({
					url: '/pages/payorder/index?orderNo=' + result + '&orderType=80' + '&orderAmount=' + this.Amount
				});
			});
			this.submitUploadStatus = false;
		}
	}
};
</script>
<style>
@import url('../../../css/common.css');
</style>
<style scoped lang="scss">
.container {
	background-color: #ffffff;
	font-family: 'SourceHanSansCN-Regular';
}

.customer-balance {
	padding-top: 40rpx;
	padding-left: 30rpx;
	color: $main-text-color-gray-33;
	font-size: $main-text-size-32;
	margin-bottom: 40rpx;
	.balance {
		font-size: $main-text-size-40;
		font-family: 'SourceHanSansCN-Medium';
		margin-left: 20rpx;
	}
}

.amoutlist {
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.amoutlist::after {
	content: '';
	width: 30%;
}

.recharge {
	width: 29%;
	height: 105rpx;
	color: $main-text-color-orange-FCC309;
	font-size: $main-text-size-40;
	border-radius: 12rpx;
	border: 2rpx solid $main-btn-orange-color-FCC309;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25rpx;
}

.seelct-recharge {
	width: 29%;
	height: 105rpx;
	color: #ffffff;
	font-size: $main-text-size-40;
	border-radius: 12rpx;
	border: 2rpx solid $main-btn-orange-color-FCC309;
	background-color: $main-btn-orange-color-FCC309;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25rpx;
}

.customer_recharge {
	width: 90vw;
	height: 100rpx;
	color: $main-text-color-orange-FCC309;
	font-size: $main-text-size-40;
	border-radius: 15rpx;
	border: 2rpx solid $main-btn-orange-color-FCC309;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.confirm-btn {
	position: fixed;
	bottom: 0;
	font-size: 36rpx;
	color: #fff;
	width: 100vw;
	line-height: 120rpx;
	height: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: unset;
}
.input-number-amount {
	height: 100%;
	text-align: left;
	font-size: $main-text-size-40;
}
</style>
